<template>
  <a-drawer
    title="资助金额录入"
    :width="windowWidth"
    placement="right"
    :closable="false"
    @close="onClose"
    :visible="recruitEditVisiable"
    style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
    <a-form :form="form">
      <a-row :gutter="48">
          <a-col :sm="{span:12}" :lg="{span:12}"  >
            <a-form-item label="学校资助金额">
               <a-input placeholder="请输入..." @input="getTotal"  v-decorator="['xxzzjz', { rules: [{ required: true, message: '请输入学校资助金额' }] }]"/>
            </a-form-item>
          </a-col>
          <a-col :sm="{span:12}" :lg="{span:12}"  v-if="xmsbId == 2">
            <a-form-item label="培养单位资助金额">
               <a-input placeholder="请输入..." @input="getTotal" v-decorator="['pydwzzzje', { rules: [{ required: true, message: '请输入培养单位资助金额' }] }]"/>
            </a-form-item>
          </a-col>
          <a-col :sm="{span:12}" :lg="{span:12}" v-if="xmsbId == 2">
            <a-form-item label="往返机票费用">
               <a-input placeholder="请输入..." @input="getTotal"  v-decorator="['jpfy', { rules: [{ required: true, message: '请输入往返机票费用' }] }]"/>
            </a-form-item>
          </a-col>
          <a-col :sm="{span:12}" :lg="{span:12}"  >
            <a-form-item label="预算总金额">
               <a-input placeholder="请输入..." disabled  v-decorator="['zje', { rules: [{ required: true, message: '请输入资助总金额' }] }]"/>
            </a-form-item>
          </a-col>
          <a-col :sm="{span:12}" :lg="{span:12}"  >
            <a-form-item label="学校资助报账日期">
              <a-date-picker v-decorator="['xxjzbzrj', { rules: [{ required: true, message: '请输入资助总金额' }] }]"/>
            </a-form-item>
          </a-col>
          <a-col :sm="{span:12}" :lg="{span:12}"  >
            <a-form-item label="培养单位资助报账日期">
              <a-date-picker v-decorator="['pydwzjbzrj', { rules: [{ required: true, message: '请输入资助总金额' }] }]"/>
            </a-form-item>
          </a-col>
      </a-row>
    </a-form>
    <div class="drawer-bootom-button">
      <a-button style="margin-right: .8rem" @click="onClose">取消</a-button>
      <a-button @click="handleSubmit" type="primary" :loading="loading">保存</a-button>
    </div>
  </a-drawer>
</template>

<script>
import moment from 'moment'
import { STable } from '~'
import { mapState } from 'vuex'

const formItemLayout = {
  labelCol: { span: 3 },
  wrapperCol: { span: 18 }
}
export default {
  name: 'RecruitAdd',
  props: {
    recruitEditVisiable: {
      default: false
    },
    info: {
      default: () => []
    }
  },
  components: {
    STable
  },
  data () {
    return {
      formItemLayout,
      windowWidth:"450",
      loading: false,
      xmsbId:"",
      id:""
    }
  },
  beforeCreate(){
    this.form = this.$form.createForm(this)
  },
  mounted(){
     this.windowWidth = document.body.clientWidth>450?450:document.body.clientWidth
  },
  created () {

  },
  watch:{
    info(val){
       this.form.resetFields()
       this.xmsbId = val.xmsbId
       this.id = val.id
       this.info.xxjzbzrj = moment(this.info.xxjzbzrj, 'YYYY-MM-DD')
       this.info.pydwzjbzrj = moment(this.info.pydwzjbzrj, 'YYYY-MM-DD')
       this.$nextTick(()=>{
        let keys = Object.keys(this.form.getFieldsValue())
        let obj ={}
        keys.forEach(item =>{
          obj[item] = this.info[item]
        })
        console.log(obj,123123)
        this.form.setFieldsValue(obj)
      })
    }
  },
  methods: {
    reset () {
      this.data = []
    },
    // 关闭
    onClose () {
      this.reset()
      this.$emit('close')
    },
    // 保存
    handleSubmit () {
      this.form.validateFields( (err,values) => {
          
        if(err){
         this.$message.error("请输入必填项")
        }else{
          console.log(values)
          let params = {
            id:this.id,
            ...values
          }
          if(params.pydwzjbzrj)params.pydwzjbzrj=moment(params.pydwzjbzrj).format('YYYY-MM-DD')
          if(params.xxjzbzrj)params.xxjzbzrj=moment(params.xxjzbzrj).format('YYYY-MM-DD')
          this.$api.student.reportUpdate(params).then(res => {
            if(res.status){
              this.$message.success(res.msg)
              this.$emit('close')
            }
          })
        }
      })
    },
    getTotal(){
      var xxje,pybje,jpfy,total = 0
      xxje = this.form.getFieldValue('xxzzjz')?this.form.getFieldValue('xxzzjz'):0
      pybje = this.form.getFieldValue('pydwzzzje')?this.form.getFieldValue('pydwzzzje'):0
      jpfy = this.form.getFieldValue('jpfy')?this.form.getFieldValue('jpfy'):0
      total = (parseFloat(xxje) + parseFloat(pybje) + parseFloat(jpfy)).toFixed(1)
      this.form.setFieldsValue({'zje':total})
    }
  }
}
</script>
